<template>
  <div>
    <div class="header">
      <header-page></header-page>
    </div>

    <div class="crumb-wrap">
      <div class="crumb">
        <a href="#">首页</a> &gt; <a href="#">鲜花</a>&gt; 幸福绽放
      </div>
    </div>
    <!-- 商品 -->
    <div class="product-wrap">
      <div class="product-intro">
        <div class="xp-preview">
          <div class="xpreview">
            <div class="xp-bigimage" id="xproductImg">
              <!-- <div class="xs-container" id="xproductImg"> -->
                <!-- <div class="xs-wrapper" > -->
              <div class="xs-slide">
                <img src="../../assets/images/detailimg/9012095.jpg" alt="" class="show"/>
              </div>
              <div class="xs-slide">
                <img src="../../assets/images/detailimg/201604271726445625.jpg" alt=""/>
              </div>
              <div class="xs-slide">
                <img src="../../assets/images/detailimg/201604271726515156.jpg" alt=""/>
              </div>
              <div class="xs-slide">
                <img src="../../assets/images/detailimg/201604271726585625.jpg" alt=""/>
              </div>
                <!-- </div> -->
              <!-- </div> -->
            </div>
            <div class="xp-list xclearfix" id="xswiperController">
              <div class="xp-list-item active">
                <img src="../../assets/images/detailimg/9012095.jpg" alt=""/>
              </div>
              <div class="xp-list-item">
                <img src="../../assets/images/detailimg/201604271726445625.jpg" alt=""/>
              </div>
              <div class="xp-list-item">
                <img src="../../assets/images/detailimg/201604271726515156.jpg" alt=""/>
              </div>
              <div class="xp-list-item">
                <img src="../../assets/images/detailimg/201604271726585625.jpg" alt=""/>
              </div>
            </div>
          </div>
        </div>
        <div class="product-info">
          <div class="product-info-area">
            <div class="title">
              <p class="title-name">幸福绽放</p>
              <div class="title-li">
                <span class="title-point">[温暖之选 亮丽花色 特价]</span>
                <span class="title-desc">粉色康乃馨19枝</span>
              </div>
            </div>
            <div class="price">
              <div class="price-item">
                <span class="price-label">售价</span>
                <div class="price-box">
                  <span class="sell-price">￥165</span>
                  <div class="discount-tag-list"></div>
                  <span class="original-price"
                    >市场价<span class="s-price">￥215</span></span
                  >
                </div>
                <div class="discounts">
                  <div class="discounts-title">
                    <span class="iconfont iconfont-telephone"></span>
                    <span class="middle">手机专享价</span>
                    <span id="wxappPrice">￥162</span>
                  </div>
                  <div class="qr-dropdown-box">
                    <div class="qr-dropdown-item">
                      <img
                        src="../../assets/images/detailimg/app_qrcode_2021.png"
                        alt=""
                      />
                      <p>APP新人专享100元大礼包</p>
                    </div>
                    <div class="qr-dropdown-item">
                      <img
                        src="../../assets/images/detailimg/tempqrpic.png"
                        alt=""
                      />
                      <p>微信公众号快捷购买</p>
                    </div>
                  </div>
                </div>
                <div class="sale-count">已售<span>1.69万</span>件</div>
              </div>
              <div class="price-time">
                <span class="price-label">配送时间</span>
                <div class="price-time-group">
                  <span class="price-time-item active">平时配送￥165</span>
                  <span class="price-time-item">2.9~2.15配送￥259</span>
                </div>
              </div>
            </div>
            <div class="huayu">
              <div class="huayu-item">
                <span class="huayu-label">花语</span>
                <p class="huayu-content">
                  携带一束鲜花来到您的身旁，花儿浓缩了我对您的祝福，您在我的心里永远美丽、漂亮！
                </p>
              </div>
              <div class="huayu-item">
                <span class="huayu-label">材料</span>
                <p class="huayu-content">
                  粉色康乃馨19枝，石竹梅10枝、紫色勿忘我2枝、栀子叶10枝
                </p>
              </div>
              <div class="huayu-item">
                <span class="huayu-label">包装</span>
                <p class="huayu-content">
                  内层紫红色不织布，外层粉色白牛皮纸，玫红色缎带花结
                </p>
              </div>
            </div>
            <div class="delivery">
              <div class="delivery-item delivery-range">
                <span class="delivery-label">配送说明</span>
                <div class="delivery-content delivery-range-detail">
                  <p>全国</p>
                  <span class="icon icon-arrow"></span>
                </div>
              </div>
              <div id="deliItem" class="delivery-item delivery-addr">
                <span class="delivery-label">配送至</span>
                <div class="stock-address delivery-address text-primary">
                  <a class="delivery-area" href="#"
                    ><span class="delivery-area-text">省/市/区</span
                    ><span class="icon icon-deliarr"></span
                  ></a>
                </div>
                <div class="delivery-content-time">
                  <p id="deliTips" class="delivery-content">请选择配送区域</p>
                </div>
              </div>
            </div>
            <div class="btn-group">
              <router-link
                to="/shoppcar"
                class="btn-group-item btn-addcart"
                href="#"
                ><span class="icon icon-addcartbtn"></span
                >加入购物车</router-link
              >
              <router-link
                to="/sendinfo"
                class="btn-group-item btn-soonbuy"
                href="#"
                >立即购买</router-link
              >
              <div class="btn-group-guanzhu">
                <a id="btnGuanzhu" href="#">
                  <span class="iconn icon-collectn"></span>收藏商品
                </a>
              </div>
            </div>
            <div id="ajax_pricebox"></div>
          </div>
          <div class="product-info-comment" id="commentSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">紫*</span>
                  <span class="c-time">2020-12-25</span>
                  <span class="c-addr">上海静安区</span>
                </div>
                <div class="swiper-cm-text">
                  非常喜欢，非常漂亮，太好看了，妈妈很喜欢，大赞花也送的及时，一直以来关注并购买，品质上档次，喜欢的宝宝可以放心选够，大爱。
                </div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">Chloe*jt??</span>
                  <span class="c-time">2020-03-08</span>
                  <span class="c-addr">广东省深圳市龙岗区</span>
                </div>
                <div class="swiper-cm-text">送给妈妈的礼物。妈妈可喜欢了。</div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">丁*君</span>
                  <span class="c-time">2019-05-20</span>
                  <span class="c-addr">上海嘉定区</span>
                </div>
                <div class="swiper-cm-text">老妈很喜欢，哈哈，写的贺卡也很肉麻</div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">天*星</span>
                  <span class="c-time">2020-01-07</span>
                  <span class="c-addr">北京朝阳区</span>
                </div>
                <div class="swiper-cm-text">真的特别好，是送给妈妈的惊喜！花很新鲜，甚至提前到了，非常感谢！！妈妈也特别开心！</div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">方*</span>
                  <span class="c-time">2020-11-18</span>
                  <span class="c-addr">北京海淀区</span>
                </div>
                <div class="swiper-cm-text">花很美，满意</div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">念*?</span>
                  <span class="c-time">2020-11-01</span>
                  <span class="c-addr">北京丰台区</span>
                </div>
                <div class="swiper-cm-text">花花很漂亮。</div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">Julia*Chan</span>
                  <span class="c-time">2021-02-06</span>
                  <span class="c-addr">上海长宁区</span>
                </div>
              <div class="swiper-cm-text textSwiper">
                鲜花很漂亮，与官网广告照片一样。
                当天几个小时内就送到了，非常满意，下次还会再买。
                </div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">赞州 (*_^)</span>
                  <span class="c-time">2020-10-09</span>
                  <span class="c-addr">广东茂名市信宜市</span>
                </div>
                <div class="swiper-cm-text">
                  花儿还是很不错的，生日很早就送到了
                </div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">金*岐</span>
                  <span class="c-time">2019-01-22</span>
                  <span class="c-addr">辽宁沈阳市铁西区</span>
                </div>
                <div class="swiper-cm-text">
                  花很漂亮，妈妈很满意。下次有需要会回购！
                </div>
              </div>
              <div class="swiper-slide textSwiper">
                <div class="swiper-cm-header">
                  <span class="c-name">7*</span>
                  <span class="c-time">2019-05-13</span>
                  <span class="c-addr">山东青岛市黄岛区</span>
                </div>
                <div class="swiper-cm-text">妈妈很喜欢了！高兴的不得了！</div>
              </div>
              <!--  字体图标 -->
              <div id="el-icon-upp">
                <i class="el-icon-arrow-up updown"></i>
                <br>
                <i class="el-icon-arrow-down downup"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 相关推荐 -->
    <div class="wrap clearfix">
      <div class="aside">
        <div class="aside-item">
          <div class="aside-hd">浏览记录</div>
          <div class="aside-bd">
            <span>暂无浏览记录！</span>
          </div>
        </div>
        <div class="aside-item">
          <div class="aside-hd">热销推荐</div>
          <div class="aside-bd">
            <ul class="hot-list">
              <li class="hot-item" v-for="(item, index) in ars" :key="index">
                <a href="/product/9012092.html">
                  <div class="hot-item-pic">
                    <img
                      :src="
                        require('../../assets/images/detailimg/' + item.img)
                      "
                      alt=""
                    />
                    <p class="p-title">{{ item.title }}</p>
                    <p class="p-price rx-price" data-id="9012092">
                      ￥{{ item.price }}
                    </p>
                  </div>
                  <!-- <div class="hot-item-info"> -->
                   
                  <!-- </div> -->
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="detail">
        <div class="detail-hd">
          <div class="detail-hd-wp" id="topTab">
            <ul>
              <li class="detail-hd-tab" data-anchor="#product">
                商品详情
                <div class="datail-all curr"></div>
              </li>
              <li class="detail-hd-tab" data-anchor="#comment">
                用户评价(<span>2068</span>)
                <div class="datail-all"></div>
              </li>
              <li class="detail-hd-tab" data-anchor="#question">
                常见问题
                <div class="datail-all"></div>
              </li>
              <li class="detail-hd-tab" data-anchor="#service">
                购物保障
                <div class="datail-all"></div>
              </li>
            </ul>
          </div>
        </div>
        <div id="product" class="detail-item detail-product">
          <div class="detail-bd">
            <div class="detail-product-info">
              <div class="detail-product-info-l">
                <p>产品参数</p>
              </div>
              <div class="detail-product-info-r">
                <div class="detail-product-info-item">
                  <span class="detail-product-info-label">编号</span>
                  <span class="detail-product-info-detail">9012095</span>
                </div>
                <div class="detail-product-info-item">
                  <span class="detail-product-info-label">类别</span>
                  <span class="detail-product-info-detail">鲜花</span>
                </div>
              </div>
            </div>
            <div class="detail-product-content">
              <p>
                <img
                  alt=""
                  src="../../assets/images/detailimg/by_20180611165700429.jpg"
                  border="0"
                />
              </p>
              <p>&nbsp;</p>
              <p>
                <img
                  alt=""
                  src="../../assets/images/detailimg/by_20180702140111725.jpg"
                  border="0"
                />
              </p>
              <p>&nbsp;</p>
              <p>
                <img
                  alt=""
                  src="../../assets/images/detailimg/20164271730132453463.jpg"
                  border="0"
                />
              </p>
              <p>&nbsp;</p>
              <p>
                <img
                  alt=""
                  src="../../assets/images/detailimg/20164271730183510348.jpg"
                  border="0"
                />
              </p>
              <p>
                <br />
              </p>
              <img
                src="../../assets/images/detailimg/xianhua_cardstyle.jpg"
                alt="附送贺卡"
              />
              <section class="disseminate">
                <div class="point" v-for="(item, index) in arrr" :key="index">
                  <div class="point-title">{{ item.title }}</div>
                  <div class="point-body">
                    <p>{{ item.desc }}</p>
                    <img
                      :src="
                        require('../../assets/images/detailimg/' + item.img)
                      "
                      alt=""
                    />
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
        <div id="comment" class="detail-item detail-comment">
          <div class="detail-item-title">用户评价</div>
          <div class="detail-bd">
            <div class="detail-comment-hd">
              <div class="detail-comment-radio">
                <a
                  href="#"
                  class="detail-comment-radio-item active"
                  onclick="viewComments(this,'all');"
                >
                  <span class="type">全部评价</span>
                  <span class="nums">(2068)</span>
                </a>
              </div>
              <div class="detail-comment-navi">
                <a class="detail-comment-navi-item" href="#" target="_blank"
                  >查看当前商品评价</a
                >
                <a class="detail-comment-navi-item" href="#" target="_blank"
                  >查看所有商品评价</a
                >
              </div>
            </div>
            <div class="detail-comment-bd">
              <div class="detail-comment-list">
                <div
                  class="detail-comment-item"
                  v-for="(item, index) in arr"
                  :key="index"
                >
                  <div class="detail-comment-item-user">
                    <div class="detail-comment-item-avatar">
                      <img
                        :src="
                          require('../../assets/images/detailimg/' + item.img)
                        "
                        alt=""
                      />
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                  <div class="detail-comment-item-main tm-m-photos">
                    <div class="star stars5">
                      <ul class="star-list">
                        <li class="star-item"></li>
                        <li class="star-item"></li>
                        <li class="star-item"></li>
                        <li class="star-item"></li>
                        <li class="star-item"></li>
                      </ul>
                    </div>
                    <div class="detail-comment-item-content">
                      <p>{{ item.desc }}</p>
                    </div>
                    <ul
                      class="detail-comment-item-imglist tm-m-photos-thumb clearfix"
                    >
                      <li class="detail-comment-item-img">
                        <img
                          :src="
                            require('../../assets/images/detailimg/' +
                              item.imgs)
                          "
                          alt=""
                          width="78"
                          height="78"
                        />
                      </li>
                    </ul>
                    <div class="detail-comment-item-btm">
                      <span class="detail-comment-item-addr">{{
                        item.addr
                      }}</span>
                      <span class="detail-comment-item-time">{{
                        item.time
                      }}</span>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div id="question" class="detail-item detail-question">
          <div class="detail-item-title">常见问题</div>
          <div class="detail-bd">
            <div class="detail-question-content">
              <div class="detail-question-service">
                <span>购买前如有问题，请向花礼网咨询。</span>
                <a href="#">
                  <i class="iconfont iconfont-sevice"></i>
                  联系客服
                </a>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i
                  >我订鲜花（或蛋糕）最快多久能送到？
                </p>
                <p class="detail-question-item-a">
                  在您订购付款后，鲜花最快1-3个小时送到接收人手上。（注：此时间为可能的最快送货时间，我们会确保在您下单所选时间段内送达。）蛋糕一般提前半天订购就可以送到。
                </p>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i
                  >我订鲜花（或蛋糕）需要提前预订吗？
                </p>
                <p class="detail-question-item-a">
                  鲜花（或蛋糕）一般提前半天订购就可以送到。当然，您提前一个月、两个月、半年，或提前更长时间订购都是可以的，我们都会在您指定的日期为您配送。
                  鲜花蛋糕都是配送当日新鲜材料制作而成，确保新鲜度，敬请放心订购！<br />
                  越早订，越从容：<br />
                  1.您提前预订，方便我们提前安排；<br />
                  2.如果您订的鲜花含有特殊花材，则是需要提前预订的，提前预订可确保花材齐全；<br />
                  3.提前订好，我们会记住您选择的配送日期，按指定日期准时送达，即使忙碌，也保证您不会错过任何一个重要的日子！
                </p>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i
                  >异地送花可以吗？(如：我人在北京可以送花到长沙去吗？)
                </p>
                <p class="detail-question-item-a">
                  可以，花礼网全国连锁，全部直辖市、省会/首府、地级市（除西藏、青海）、大部分县级城市都可以配送，可送达全国2000+城市。而且，确保新鲜度，敬请放心订购！
                </p>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i
                  >我要选择某一个时段送到？可以吗？
                </p>
                <p class="detail-question-item-a">
                  提交订单时您可以选择上午(8:30-12:00)、下午(12:00-18:00)、晚上(18:00-21:00)三个时段；如果对配送时间点有特别需求，您可以选择定时服务。特别提示：如果下单时间距离所选时段少于3小时，您所选时段无法满足的情况下，将尽量在您付款后3小时内送到。
                </p>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i
                  >我怎么样付款？我在国外如何办理支付？
                </p>
                <p class="detail-question-item-a">
                  我们支持微信、支付宝、财付通、PayPal等方式付款，订单生成后可选择上述在线付款方式，非常快捷方便。如果您在国外，建议使用Paypal支付:
                  支持PayPal余额支付、VISA卡、Master卡、AE卡等信用卡。
                </p>
              </div>
              <div class="detail-question-item">
                <p class="detail-question-item-q">
                  <i class="iconfont iconfont-q"></i>关于售后服务：
                </p>
                <p class="detail-question-item-a">
                  我们一直致力于持续提升服务水平，追求零客诉，我们为客户提供完善的售后服务。如果出现误单、花材不符、贺卡有误或者其他任何您不满意的情况，欢迎您第一时间与我们联系，我们将尽快为您做出回复和处理。200%退赔承诺，即如果漏单未送，订单款项全额退还给您，原订单商品同时再免费配送一次，
                  <a href="#">详见售后服务条款>></a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div id="service" class="detail-item detail-service">
          <div class="detail-item-title">购物保障</div>
          <div class="detail-bd">
            <div class="detail-service-tab">
              <ul>
                <li class="detail-service-tab-item active">
                  <a href="#serverPane01" data-id="#serverPane01">
                    <span class="icon icon-service1"></span>
                    <p>16年品牌</p>
                  </a>
                </li>
                <li class="detail-service-tab-item">
                  <a href="#serverPane02" data-id="#serverPane02">
                    <span class="icon icon-service2"></span>
                    <p>销量领先</p>
                  </a>
                </li>
                <li class="detail-service-tab-item">
                  <a href="#serverPane03" data-id="#serverPane03">
                    <span class="icon icon-service3"></span>
                    <p>百万客户信赖</p>
                  </a>
                </li>
                <li class="detail-service-tab-item">
                  <a href="#serverPane04" data-id="#serverPane04">
                    <span class="icon icon-service4"></span>
                    <p>订单实拍</p>
                  </a>
                </li>
                <li class="detail-service-tab-item">
                  <a href="#serverPane05" data-id="#serverPane05">
                    <span class="icon icon-service5"></span>
                    <p>3小时配送</p>
                  </a>
                </li>
                <li class="detail-service-tab-item">
                  <a href="#serverPane06" data-id="#serverPane06">
                    <span class="icon icon-service6"></span>
                    <p>200%退赔承诺</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="detail-service-content">
            <div id="serverPane01" class="detail-service-content-item active">
              <img src="../../assets/images/detailimg/server_01.jpg" alt="" />
            </div>
            <div id="serverPane02" class="detail-service-content-item">
              <img src="../../assets/images/detailimg/server_02.jpg" alt="" />
            </div>
            <div id="serverPane03" class="detail-service-content-item">
              <img src="../../assets/images/detailimg/server_03.jpg" alt="" />
            </div>
            <div id="serverPane04" class="detail-service-content-item">
              <img src="../../assets/images/detailimg/server_04.jpg" alt="" />
            </div>
            <div id="serverPane05" class="detail-service-content-item">
              <img src="../../assets/images/detailimg/server_05.jpg" alt="" />
            </div>
            <div id="serverPane06" class="detail-service-content-item">
              <img src="../../assets/images/detailimg/server_06.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer-page></footer-page>
  </div>
</template>

<script>
import HeaderPage from "../../components/Header/header.vue";
import footerPage from "../../components/Footer/footer.vue";

export default {
  components: {
    HeaderPage,
    footerPage,
  },
  data() {
    return {
      arr: [],
      arrr: [],
      ars: [],
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
    }
  },
  mounted() {
    this.$axios.get("../../static/data/detail.json").then((res) => {
      // console.log(res);
      this.arr = res.data.data;
      // console.log(this.arr);
    });
    this.$axios.get("../../static/data/detail.json").then((res) => {
      // console.log(res);
      this.arrr = res.data.dats;
      // console.log(this.arrr);
    });
    this.$axios.get("../../static/data/detail.json").then((res) => {
      // console.log(res);
      this.ars = res.data.dast;
      // console.log(this.ars);
    });
  },
};

$(function () {
  // 缩略图切换
  $(".xp-list-item").hover(function () {
    $(this).addClass("active").siblings().removeClass("active");
    $(this).addClass("active").removeClass("xs-slide");
    let i = $(this).index();
    console.log(i);
    $(".xs-slide img").eq(i).show().parent().siblings().children("img").hide();
  });
  // $(".xpreview-list-item").hover(function () {
  //   let i = $(this).index();
  //   console.log(i);
    // $(".xp-bigimage img").eq(i).addClass("show").siblings().removeClass("show");
  // });
  // 商品详情页
  // let tabOffsetTop = document.getElementById("topTab").offsetTop;
  $(window).scroll(function () {
    let topTab = $("#topTab").offset().top;
    let _top = $(this).scrollTop();
    console.log(topTab, _top);
    if (_top > topTab) {
      $("#topTab").addClass("fixed");
    } else {
      $("#topTab").removeClass("fixed");
    }
  });
  $(".detail-hd-tab").eq(0).children(".datail-all").show();
  $(".detail-hd-tab").click(function () {
    // let isFixed = $(".detail").hasClass("fixed"); //导航栏是否固定
    let index = $(this).index();
    $(".detail-hd-tab").eq(index).siblings().children(".datail-all").hide();
    $(".detail-hd-tab").eq(index).children(".datail-all").show();
    console.log(index);
    let domStr = ".detail-item:lt(" + index + ")";
    $(".detail-item").show();
    $(domStr).hide();
  });

  $(".detail-service-content-item").hide().eq(0).show();
  $(".detail-service-tab a").hover(function (e) {
    // e.preventDefault();
    let index = $(this).parent().index();
    $(".detail-service-content-item").hide().eq(index).show();
    // $(this).tab("show");
    console.log(index);
  });
  // 上翻
  var curr = $(".textSwiper").index()
  $(".updown").click(function () { 
   console.log(curr); 
   curr++
   $(".textSwiper").eq(curr).css("z-index","999").siblings().css("z-index","1")
   if (curr>9) {
     curr=0
   }
  })
  // 下翻
  $(".downup").click(function () {
    console.log(curr); 
   curr--
   $(".textSwiper").eq(curr).css("z-index","999").siblings().css("z-index","1")
   if (curr<0) {
     curr=9
   }
  })
});
</script>

<style scoped lang='less'>
.crumb-wrap {
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #71797f;
  .crumb {
    width: 1200px;
    margin: 0 auto;
    a {
      margin-right: 5px;
      text-decoration: none;
      color: inherit;
    }
    :hover {
      color: #ff8263;
    }
  }
}
.product-wrap {
  font-size: 0;
  position: relative;
  .product-intro {
    width: 1200px;
    margin: 0 auto;
    .xp-preview {
      display: inline-block;
      width: 460px;
    }
    .xp-bigimage {
      position: relative;
      width: 100%;
      height: 500px;
      text-align: center;
      border: 1px solid #e9ecf0;
      border-radius: 8px;
      .xs-slide {
        position: absolute;
        width: 458px;
      }
      img {
        width: 100%;
        display: none;
      }
      .show {
        display: block;
      }
    }
    .xs-container {
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
    }
    .xs-notification {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      opacity: 0;
      z-index: -1000;
    }
    .xp-list {
      height: 80px;
      margin-top: 20px;
      overflow: hidden;
      text-align: center;
      .xp-list-item {
        position: relative;
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-left: 20px;
        overflow: hidden;
        text-align: center;
        border: 1px solid #e9ecf0;
        padding: 1px;
        cursor: pointer;
        border-radius: 8px;
      }
      .active {
        border: 2px solid #ff734c;
        padding: 0;
      }
      img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 76px;
      }
    }
    .product-info {
      display: inline-block;
      width: 740px;
      padding-left: 80px;
      vertical-align: top;
      .product-info-area {
        position: relative;
        min-height: 418px;
        padding-bottom: 94px;
      }
      .title-name {
        font-size: 22px;
        line-height: 22px;
        color: #232628;
        font-weight: bold;
      }
      .title-li {
        margin-top: 8px;
        .title-point {
          font-size: 16px;
          line-height: 20px;
          color: #ff3d12;
        }
        .title-desc {
          margin-left: 12px;
          font-size: 16px;
          line-height: 20px;
          color: #232628;
        }
      }
      .price {
        position: relative;
        margin-top: 12px;
        padding: 12px 0;
        background: #ff5147;
        border-radius: 8px 8px 0px 0px;
        background: linear-gradient(90deg, #ff734d 0%, #ff5147 100%);
        .price-label {
          display: inline-block;
          width: 80px;
          padding-left: 12px;
          font-size: 13px;
          line-height: 18px;
          color: rgba(255, 255, 255, 0.8);
        }
        .price-box {
          display: inline-block;
          vertical-align: bottom;
          .sell-price {
            display: inline-block;
            font-size: 30px;
            line-height: 30px;
            font-weight: bold;
            color: #fff;
          }
        }
        .discount-tag-list {
          display: inline-block;
          vertical-align: top;
          margin-left: 4px;
          margin-top: 5px;
        }
        .original-price {
          display: inline-block;
          margin-left: 16px;
          font-size: 13px;
          line-height: 18px;
          color: rgba(255, 255, 255, 0.8);
          .s-price {
            text-decoration: line-through;
          }
        }
        .discounts {
          display: inline-block;
          vertical-align: middle;
          margin-left: 16px;
          position: relative;
          span {
            font-size: 13px;
            line-height: 18px;
            display: inline-block;
            vertical-align: bottom;
            color: rgba(255, 255, 255, 0.8);
          }
          .middle {
            margin-right: 3px;
          }
        }
        .qr-dropdown-box {
          position: absolute;
          top: 31px;
          left: 0;
          width: 320px;
          height: 150px;
          background: #ffffff;
          box-shadow: 0px 2px 8px 0px rgb(35 38 51 / 8%);
          border-radius: 8px;
          padding-top: 10px;
          font-size: 0;
          display: none;
          z-index: 9999;
          .qr-dropdown-item {
            display: inline-block;
            font-size: 12px;
            color: #71797f;
            width: 50%;
            text-align: center;
            img {
              width: 100px;
            }
            p {
              margin-top: 6px;
            }
          }
        }
        .sale-count {
          position: absolute;
          top: 24px;
          right: 18px;
          line-height: 18px;
          font-size: 12px;
          color: #fff;
          span {
            color: #fff;
          }
        }
        .price-time {
          margin-top: 12px;
          .price-time-group {
            display: inline-block;
            vertical-align: middle;
            .price-time-item {
              display: inline-block;
              vertical-align: middle;
              padding: 3px 10px;
              color: #fff;
              font-size: 13px;
              line-height: 18px;
              font-weight: 600;
              border-radius: 12px;
              border: 1px solid rgba(255, 255, 255, 0.8);
              margin-right: 10px;
              cursor: pointer;
            }
            .active {
              background: #ffddbf;
              color: #bf551d;
              opacity: 1;
              border-color: transparent;
            }
          }
          .price-label {
            vertical-align: middle;
          }
        }
      }
      .huayu {
        padding: 12px 0;
        background: #f7f9fa;
        border-radius: 0px 0px 8px 8px;
        .huayu-label {
          display: inline-block;
          width: 80px;
          padding-left: 12px;
          font-size: 13px;
          line-height: 18px;
          color: #71797f;
          vertical-align: top;
        }
        .huayu-content {
          display: inline-block;
          width: 580px;
          font-size: 13px;
          line-height: 18px;
          color: #232628;
          vertical-align: top;
          text-align: justify;
          padding-right: 36px;
        }
      }
      .delivery-item {
        margin: 10px 0;
        .delivery-label {
          display: inline-block;
          font-size: 13px;
          line-height: 24px;
          vertical-align: top;
          width: 80px;
          padding-left: 12px;
          color: #71797f;
          line-height: 24px;
        }
        .delivery-range-detail {
          position: relative;
          width: 560px;
          max-height: 24px;
          overflow: hidden;
          p {
            padding-right: 20px;
            color: rgba(35, 38, 40, 0.9);
            white-space: normal;
          }
        }
        .delivery-content {
          display: inline-block;
          font-size: 13px;
          line-height: 24px;
          vertical-align: top;
          p {
            display: block;
            padding-right: 20px;
            color: rgba(35, 38, 40, 0.9);
            white-space: normal;
          }
        }
        .delivery-address {
          float: none;
          position: relative;
          display: inline-block;
          min-width: 164px;
          height: 24px;
          margin-right: 16px;
          .delivery-area {
            display: inline-block;
            width: 100%;
            padding: 0 8px;
            font-size: 13px;
            text-decoration: none;
            line-height: 22px;
            border: 1px solid #e9ecf0;
          }
          .delivery-area-text {
            color: #232628;
          }
          .icon {
            display: inline-block;
            float: right;
            width: 10px;
            height: 10px;
            margin-top: 5px;
            margin-left: 5px;
            background-image: url(../../assets/images/detailimg/common_sprite.png);
            background-repeat: no-repeat;
            vertical-align: top;
          }
          .icon-deliarr {
            background-position: 0 -403px;
          }
          .delivery-area-pop {
            position: relative;
            float: none;
            height: 0;
            .content {
              // display: none;
              position: absolute;
              width: 380px;
              background: #fff;
              padding-top: 20px;
              border: 1px solid #ccc;
              top: 100%;
              left: 0;
              padding: 12px;
              border-color: #e9ecf0;
              z-index: 1010;
            }
          }
        }
        .delivery-content-time {
          display: block;
          padding-left: 80px;
          color: #ff734c;
        } 
      }
      .btn-group {
        position: absolute;
        bottom: 12px;
        .btn-group-item {
          display: inline-block;
          width: 208px;
          height: 56px;
          margin-right: 40px;
          border-radius: 28px;
          font-size: 22px;
          font-weight: bold;
          text-align: center;
        }
        .btn-addcart {
          color: #ff734c;
          line-height: 54px;
          border: 1px solid rgba(255, 115, 76, 0.2);
          background: #fff0ec;
          text-decoration: none;
        }
        .btn-soonbuy {
          color: #fff;
          line-height: 56px;
          background: #ff734c;
          text-decoration: none;
        }
        .btn-group-guanzhu {
          display: inline-block;
          margin-top: 18px;
          font-size: 14px;
          color: #232628;
          line-height: 20px;
          a {
            text-decoration: none;
            color: inherit;
          }
          :hover {
            color: #ff8263;
          }
        }
        .iconn {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-top: 4px;
          margin-right: 8px;
          background-image: url(../../assets/images/detailimg/common_sprite.png);
          background-repeat: no-repeat;
          vertical-align: top;
        }
        .icon-collectn {
          background-position: -52px -48px;
        }
        .icon {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-top: 15px;
          margin-right: 10px;
          background-image: url(../../assets/images/detailimg/common_sprite.png);
          background-repeat: no-repeat;
          vertical-align: top;
        }
        .icon-addcartbtn {
          background-position: -306px -102px;
        }
      }
      .product-info-comment {
        margin-top: 40px;
        position: relative;
        color: #232628;
        height: 80px;
        overflow: hidden;
        .swiper-wrapper {
          width: 608px;
          position: relative;
          width: 100%;
          height: 100%;
          z-index: 1;
          display: flex;
          box-sizing: content-box;
        }
        .swiper-slide{
          width: 450px;
          // display: none;
          position: absolute;
          background-color: white;
        }
        .swiper-cm-header {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          color: #71797f;
        }
        #el-icon-upp {
          width: 100px;
          height: 40px;
          position: absolute;
          right: 0;
          font-size: 18px;
          margin-top: 10px;
        }
        .c-name {
          font-size: 13px;
        }
        .c-time {
          margin-left: 60px;
        }
        .c-addr {
          margin-left: 10px;
        }
        .swiper-cm-text {
          margin-top: 6px;
          font-size: 13px;
          line-height: 18px;
          text-align: justify;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .swiper-nav {
          position: absolute;
          right: 0;
          top: 24px;
          .swiper-nav {
            position: absolute;
            right: 0;
            top: 24px;
          }
        }
      }
    }
  }
}
.wrap {
  width: 1200px;
  margin: 60px auto 0;
  .aside {
    float: left;
    width: 200px;
    .aside-item {
      background: #f7f9fa;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 20px;
      .aside-hd {
        height: 50px;
        padding-left: 20px;
        font-size: 16px;
        line-height: 50px;
        color: #232628;
        font-weight: 600;
      }
      .aside-bd {
        padding: 0 20px 20px;
        color: #232628;
        .hot-list {
          clear: both;
          .hot-item {
            margin-bottom: 20px;
            list-style: none;
          }
        }
        .hot-item-pic {
          width: 100%;
          border-radius: 8px;
          overflow: hidden;
          img {
            max-width: 100%;
          }  
          p{
            padding-top: 4px;
            text-align: center;
          }
          .p-title {
            font-size: 13px;
            line-height: 50px;
            height: 36px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .p-price {
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
          }
        }
      }
      a {
        text-decoration: none;
        color: inherit;
      }
    }
    .hot-item :hover p{
      color: #ff734c;
    }
  }
  .detail {
    float: left;
    width: 980px;
    margin-left: 20px;
    .detail-hd {
      // position: fixed;
      width: 980px;
      height: 50px;
      background: #f3f5f7;
      margin-bottom: 20px;
      .detail-hd-wp {
        position: relative;
      }
      .fixed {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f3f5f7;
      }
      ul {
        li {
          display: inline-block;
          padding: 0 50px;
          font-size: 16px;
          line-height: 50px;
          height: 50px;
          color: #232628;
          vertical-align: top;
          position: relative;
          .datail-all {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background-color: #ff734d;
            display: none;
          }
        }
        // :before {
        //   position: absolute;
        //   display: inline-block;
        //   content: "";
        //   left: 50%;
        //   bottom: 0;
        //   width: 100px;
        //   margin-left: -50px;
        //   height: 3px;
        //   background: #ff734d;
        //   border-radius: 2px;
        // }
        // .active {
        //   position: relative;
        //   font-weight: 600;
        // }

        // .border{
        //   border-bottom: 2px solid #ff734d;
        // }
        span {
          color: #ff3d12;
        }
      }
    }
  }
  .detail-item {
    position: relative;
    width: 980px;
    margin-bottom: 40px;
    font-size: 0;
    .detail-product-info {
      width: 980px;
      padding: 20px 52px;
      background: #f7f9fa;
      border-radius: 0px 0px 8px 8px;
      margin: 0 auto;
      .detail-product-info-l {
        position: relative;
        display: inline-block;
        width: 107px;
        vertical-align: middle;
      }
      p {
        font-size: 14px;
        color: #232628;
        height: 20px;
        font-weight: 600;
      }
      .detail-product-info-r {
        display: inline-block;
        width: 769px;
        padding-left: 53px;
        border-left: 1px solid #e9ecf0;
        vertical-align: middle;
        .detail-product-info-detail {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          line-height: 20px;
          color: #232628;
        }
        .detail-product-info-label {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          line-height: 20px;
          color: #71797f;
          width: 50px;
        }
      }
    }
    .detail-product-content {
      padding: 40px 115px 95px;
      text-align: center;
      .disseminate {
        width: 750px;
        margin: 20px auto 0;
        background: #ffffff;
        .point-title {
          position: relative;
          padding: 24px 16px 14px;
          text-align: center;
          font-size: 26px;
          line-height: 40px;
          font-weight: bold;
          overflow: hidden;
        }
        .point-body {
          padding-bottom: 18px;
          p {
            width: 686px;
            margin: 0 auto;
            font-size: 16px;
          }
          img {
            margin-top: 20px;
          }
        }
      }
    }
    .detail-item-title {
      padding: 15px 30px;
      background: #f3f5f7;
      font-size: 16px;
      line-height: 20px;
      color: #232628;
      font-weight: bold;
      border-radius: 8px 8px 0px 0px;
    }
    .detail-comment-hd {
      background: #f7f9fa;
      padding: 15px 30px;
      color: #232628;
      .detail-comment-radio-item {
        font-size: 14px;
        line-height: 20px;
      }
      .active {
        font-weight: bold;
        color: #ff734c;
        text-decoration: none;
      }
      .detail-comment-navi {
        float: right;
        margin-top: -20px;
        .detail-comment-navi-item {
          font-size: 14px;
          line-height: 20px;
          margin-left: 45px;
        }
        a {
          text-decoration: none;
          color: inherit;
        }
        :hover {
          color: #ff734c;
        }
      }
    }
    .detail-comment-bd {
      padding-bottom: 20px;
      background: #ffffff;
      border-radius: 0px 0px 8px 8px;
      border: 1px solid #f7f9fa;
      .detail-comment-item {
        padding: 20px 0;
        .detail-comment-item-user {
          display: inline-block;
          width: 190px;
          padding-left: 20px;
          text-align: center;
          vertical-align: top;
        }
        .detail-comment-item-avatar {
          padding: 0 10px;
          img {
            width: 48px;
            height: 48px;
            vertical-align: middle;
            border-radius: 50%;
            overflow: hidden;
          }
          span {
            display: inline-block;
            vertical-align: middle;
            width: 100px;
            font-size: 13px;
            line-height: 18px;
            color: rgba(35, 38, 40, 0.7);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .detail-comment-item-main {
          display: inline-block;
          .star-list {
            font-size: 0;
            .star-item {
              display: inline-block;
              vertical-align: middle;
              width: 16px;
              height: 16px;
              background-size: cover;
              background-repeat: no-repeat;
              margin-right: 4px;
              background-image: url(../../assets/images/detailimg/star_red.png);
            }
          }
          .detail-comment-item-content {
            width: 740px;
            margin-top: 6px;
            p {
              font-size: 13px;
              line-height: 18px;
              color: #232628;
            }
          }
          .detail-comment-item-imglist {
            margin-top: 6px;
            .detail-comment-item-img {
              display: inline-block;
              width: 80px;
              height: 80px;
              padding: 0;
              line-height: 78px;
              margin-right: 10px;
              vertical-align: middle;
              overflow: hidden;
              text-align: center;
              border: 1px solid #e9ecf0;
            }
            img {
              object-fit: contain;
              width: 100%;
              height: 100%;
              max-width: 100%;
              max-height: 100%;
              vertical-align: middle;
            }
          }
          .detail-comment-item-btm {
            margin-top: 10px;
            .detail-comment-item-addr,
            .detail-comment-item-time {
              margin-right: 12px;
              font-size: 12px;
              color: #b4babf;
            }
          }
        }
      }
      .el-pagination {
        text-align: center;
      }
    }
    .detail-question-content {
      background-color: #f7f9fa;
      padding: 14px 30px 10px;
      .detail-question-service {
        margin-bottom: 17px;
        span {
          display: inline-block;
          font-size: 14px;
          line-height: 20px;
          color: #232628;
          vertical-align: middle;
        }
        a {
          display: inline-block;
          vertical-align: middle;
          margin-left: 6px;
          padding: 0px 11px;
          font-size: 13px;
          height: 27px;
          line-height: 27px;
          background: #ff734d;
          border-radius: 14px;
          color: #fff;
          font-weight: 500;
        }
      }
      .detail-question-item {
        margin-bottom: 19px;
        color: #232628;
        .detail-question-item-q {
          font-size: 15px;
          line-height: 20px;
          font-weight: 600;
          .iconfont {
            font-size: 16px;
            color: #fd9477;
            margin-right: 10px;
            vertical-align: top;
          }
        }
        .detail-question-item-a {
          margin-top: 2px;
          padding-left: 11px;
          font-size: 13px;
          line-height: 18px;
          a {
            text-decoration: underline;
            color: #ff734d;
          }
        }
      }
    }
    .detail-bd {
      padding-bottom: 30px;
      .detail-service-tab {
        padding: 15px 0;
        background: #f7f9fa;
        li {
          display: inline-block;
          width: 16.66666667%;
          text-align: center;
          vertical-align: top;
          a {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-decoration: none;
          }
          .icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(//img02.hua.com/pc/pimg/home/common_sprite.png);
            background-repeat: no-repeat;
            vertical-align: top;
          }
          .icon-service1 {
            background-position: -852px -136px;
          }
          .icon-service2 {
            background-position: -1052px -136px;
          }
          .icon-service3 {
            background-position: -1102px -136px;
          }
          .icon-service4 {
            background-position: -952px -136px;
          }
          .icon-service5 {
            background-position: -902px -136px;
          }
          .icon-service6 {
            background-position: -1002px -136px;
          }
          :hover {
            .icon-service1 {
              background-position: 0 -136px;
            }
            .icon-service2 {
              background-position: -200px -136px;
            }
            .icon-service3 {
              background-position: -250px -136px;
            }
            .icon-service4 {
              background-position: -100px -136px;
            }
            .icon-service5 {
              background-position: -50px -136px;
            }
            .icon-service6 {
              background-position: -150px -136px;
            }
          }
          p {
            font-size: 14px;
            color: #232628;
            line-height: 18px;
            margin-top: 14px;
          }
        }
      }
    }
    .detail-service-content {
      // overflow: hidden;
      // height: 400px;
      text-align: center;
      // .detail-service-content-item {
      //   // display: none;
      // }
      img {
        width: 980px;
      }
    }
  }
}
</style>
<style>
.el-cascader  {
  height: 10px;
}
</style>